<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>后台管理</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: #f8f1dc;
				overflow: hidden;
			}
			.header{
				background: rgb(46,110,194);
				color: #FFFFFF;
				padding: 10px 20px;
				height: 50px;
				line-height: 50px;
				box-shadow: 0 5px 10px #888888;
			}
			.content{
				text-align: center;
				height: 80vh;
				line-height: 80vh;
			}
			.footer{
				background: rgb(46,110,194);
				color: #FFFFFF;
				text-align: center;
				height: 30px;
				line-height: 30px;
				position: absolute;
				bottom: 0;
				width: 100%;
				box-shadow: 0 -5px 10px #888888;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header-component></header-component>
			<content-component></content-component>
			<footer-component></footer-component>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 创建组件
			var header = Vue.extend({
				template: "<div class='header'> <h1>后台管理系统</h1> </div>"
			});
			var content = Vue.extend({
				template: "<div class='content'> <h1>后台管理中心内容</h1> </div>"
			});
			var footer = Vue.extend({
				template: "<div class='footer'> 版权所有：项目开发组 </div>"
			});

			// 注册组件
			Vue.component("header-component", header);
			Vue.component("content-component", content);
			Vue.component("footer-component", footer);

			// 实例化Vue
			var vm = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>
